哈囉！受夠了中規中矩的文字了嗎？
是時候讓你的網頁閃耀起來啦！
今天我們要用 Vue.js 來玩轉動態炫彩文字和按鈕元件，把那些呆板的設計通通甩開！
把炫彩漸變、流動的動畫、還有會炫彩的按鈕，這些效果通通輕鬆搞定～
不用怕什麼技術難度，這次的實作保證好上手！
我們會把那些看起來酷炫到不行的視覺效果拆解得簡單又有趣，讓你的網頁充滿色彩、動感滿滿！
快來跟我一起解鎖這些炫彩神技，讓你的網頁變成大家目光的焦點吧！
視覺炫彩是利用豐富的顏色、動態效果和濾鏡技術，讓你的設計瞬間變得超級吸睛！
這種風格不僅增強視覺衝擊力，還讓使用者更有互動和沉浸的感覺。
視覺炫彩的核心在於通過顏色、動態和光影技術，創造生動且引人注目的視覺效果，讓設計更具魅力。
ColorfulButton.vue
<template>
<div class="bg-[#191919] h-screen flex items-center justify-center">
<a
href="#"
class="colorful-button flex relative items-center justify-center rounded-[5px] w-[calc(20vw+6px)] h-[calc(8vw+6px)] text-white font-bold uppercase no-underline overflow-hidden hover:animate-slidebg"
alt="Button"
>
<span class="w-[20vw] h-[8vw] bg-[#191919] flex items-center justify-center">
Hover Me
</span>
</a>
</div>
</template>
結構設計：
a 元素作為按鈕，並添加 colorful-button 的類別來應用樣式。div，並設置 flex 屬性使按鈕居中，讓頁面簡潔且專注於按鈕本身。span 元素作為按鈕的文本容器，設置背景顏色與按鈕保持一致，並使用 flex 對齊文字。@layer components {
.colorful-button {
background-image: linear-gradient(
90deg,
#00c0ff 0%,
#ffcf00 49%,
#fc4f4f 80%,
#00c0ff 100%
);
background-size: 200% auto; /* 背景擴展以製造滑動效果 */
transition: background-position 0s; /* 移除背景過渡延遲 */
}
.hover\:animate-slidebg:hover {
animation: slidebg 2s linear infinite; /* 觸發背景滑動動畫 */
}
@keyframes slidebg {
0% {
background-position: 0% 50%; /* 起始位置 */
}
100% {
background-position: 200% 50%; /* 滑動到最終位置 */
}
}
}
漸變背景設計 (background-image)：
linear-gradient 為按鈕設置漸變背景，顏色從藍色 (#00c0ff) 過渡到黃色 (#ffcf00) 和紅色 (#fc4f4f)，再回到藍色，創造出炫彩效果。背景大小 (background-size)：
background-size: 200% auto;，讓背景的寬度為按鈕的兩倍，為動畫滑動創造空間。動畫設計 (@keyframes slidebg)：
@keyframes 定義動畫效果，背景從左到右滑動。這個動畫的持續時間為 2 秒，並無限次重複 (infinite)。滑動效果 (hover:animate-slidebg)：
視覺動感強：透過色彩流動的動態效果，按鈕變得更具吸引力和互動性。
簡潔且有衝擊力：按鈕的漸變和滑動效果讓設計看起來高級又酷炫，而實作方式簡單易懂。
你是否曾經想過，把炫彩文字效果變成一個隨時可以重複使用的元件？
變成自己專屬的「動效庫」？
在這段落除了實作這些動態炫彩文字，還會教你如何輕鬆元件化，讓你的設計不僅閃耀動感，還能靈活應用於不同的專案中。
ColorfulText.vue
<template>
<div class="flex justify-center items-center">
<div class="flex justify-center items-center">
<svg width="0" height="0">
<filter id="f" x="-50%" y="-200%" width="200%" height="500%">
<feGaussianBlur stdDeviation="35"></feGaussianBlur>
<feColorMatrix type="saturate" values="1.3"></feColorMatrix>
<feComposite in="SourceGraphic"></feComposite>
</filter>
</svg>
<h1 class="gradient-text uppercase text-center animate-k"
:style="{ fontSize: fontSize || 'clamp(1.5rem, 5vw, 2.5rem)' }">
{{ textProps.text }}
</h1>
</div>
</div>
</template>
設計細節：
<filter> 來為文字添加濾鏡效果，使文字更加立體且充滿視覺衝擊。feGaussianBlur 添加模糊效果，而 feColorMatrix 增強了色彩的飽和度。h1 元素中的 :style 綁定 fontSize，若外部沒有指定字體大小，則使用預設的 clamp(1.5rem, 5vw, 2.5rem)，確保文字大小根據螢幕自適應。元件結構與設計概述
這個元件的設計主要是為了將炫彩文字效果封裝成一個可重複使用的 Vue 元件，並透過 props 接受外部傳入的文字內容和字體大小。
這種設計使得該元件在不同情境中可以靈活應用，並且易於客製化。
<script lang="ts" setup>
import { defineProps } from 'vue';
// 定義 props 來接受外部傳入的文字和字體大小
const textProps = defineProps<{
text: string; // 接受文字內容的 props，為必填
fontSize?: string; // 接受字體大小的 props，為可選
}>();
</script>
defineProps 定義 props，允許外部使用者設定顯示的文字 (text) 和字體大小 (fontSize)。動態樣式與動效設計實作
@layer utilities {
@property --k {
syntax: "<number>";
initial-value: 0;
inherits: false;
}
.gradient-text {
--k: 0;
background: linear-gradient(90deg,
hsl(calc(var(--k) * 1turn), 95%, 65%),
hsl(calc(var(--k) * 1turn + 90deg), 95%, 65%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: url(#f);
font-size: clamp(1.5rem, 5vw, 2.5rem);
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
@keyframes k {
to {
--k: 1;
}
}
.animate-k {
animation: k 4s linear infinite;
}
}
核心樣式設計
漸變背景：使用 linear-gradient 搭配 HSL 色彩模式，使文字背景呈現動態流動的效果，讓色彩不斷變化，增加視覺吸引力。
文字濾鏡與動畫：filter: url(#f) 加入模糊和色彩增強效果，使文字更具立體感和衝擊力。搭配 @keyframes k 定義的動畫，讓顏色隨著時間變化，創造出流動感。
動態效果：animation: k 4s linear infinite，讓文字色彩持續不斷流動，避免靜態的單調感，提升視覺動感。
props 的設計，使用者可以根據需求調整文字內容和字體大小，增強了元件的靈活性。只要幾個簡單的步驟，就能讓原本平凡的文字變成超吸睛的炫彩視覺！
不論你是第一次接觸動態設計，還是已經是個技術高手，勇敢嘗試新的設計風格，總能讓你走得更遠。
就像這些炫彩效果一樣，跳脫框架，大膽創新，讓自己的設計閃閃發光！
把學到的技巧變成你的超能力，接下來的創作就由你大展身手啦～
GO，為你的設計人生加點色彩吧！Ｏ(≧▽≦)Ｏ💖
iThome鐵人賽
看影片追技術